<!--
* @description 
* @fileName index.vue
* @author yanghong
* @date 2021/08/06 16:57:26
!-->
<template>
  <div class="information-container">
    <div class="condition">
      <el-row>
        <el-col :span="10" style="width:500px">
          <label>{{$t('Push target')}}</label>
          <el-select v-model="form.target">
            <el-option :value="1" :label="$t('Bulk push')"></el-option>
            <el-option :value="2" :label="$t('Precise push')"></el-option>
                        <el-option :value="1" :label="$t('Bulk push')"></el-option>
            <el-option :value="2" :label="$t('Precise push')"></el-option>
                        <el-option :value="1" :label="$t('Bulk push')"></el-option>
            <el-option :value="2" :label="$t('Precise push')"></el-option>
                        <el-option :value="1" :label="$t('Bulk push')"></el-option>
            <el-option :value="2" :label="$t('Precise push')"></el-option>
                        <el-option :value="1" :label="$t('Bulk push')"></el-option>
            <el-option :value="2" :label="$t('Precise push')"></el-option>
                        <el-option :value="1" :label="$t('Bulk push')"></el-option>
            <el-option :value="2" :label="$t('Precise push')"></el-option>
                        <el-option :value="1" :label="$t('Bulk push')"></el-option>
            <el-option :value="2" :label="$t('Precise push')"></el-option>
                        <el-option :value="1" :label="$t('Bulk push')"></el-option>
            <el-option :value="2" :label="$t('Precise push')"></el-option>            <el-option :value="1" :label="$t('Bulk push')"></el-option>
            <el-option :value="2" :label="$t('Precise push')"></el-option>
          </el-select>
        </el-col>
        <el-col :span="14">
          <label>{{$t('Push type')}}</label>
          <el-select v-model="form.target">
            <el-option :value="1" :label="$t('Bulk push')"></el-option>
            <el-option :value="2" :label="$t('Precise push')"></el-option>
          </el-select>
        </el-col>
      </el-row>

      <!-- <el-row>
        <el-col :span="10" style="width:500px">
          <label>{{$t('country')}}</label>
          <el-select v-model="form.target">
            <el-option :value="1" :label="$t('Bulk push')"></el-option>
            <el-option :value="2" :label="$t('Precise push')"></el-option>
          </el-select>
        </el-col>
        <el-col :span="14">
          <label>{{$t('Target type')}}</label>
          <el-checkbox-group v-model="form.checkList">
            <el-checkbox label="agent"></el-checkbox>
            <el-checkbox label="installer"></el-checkbox>
            <el-checkbox label="end-user"></el-checkbox>
          </el-checkbox-group>
        </el-col>
      </el-row> -->
      <el-divider></el-divider>

      <el-row>
        <el-col>
          <label>{{$t('Target Account')}}</label>
          <el-input type="textarea" class="inline-textarea" :placeholder="$t('分号分隔')"></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <label>{{$t('Target E-mail')}}</label>
          <el-input type="textarea" class="inline-textarea" :placeholder="$t('alarmpush.alarmSend.js_placeholder')"></el-input>
        </el-col>
      </el-row>
    
      <el-divider></el-divider>

      <el-row>
        <el-col>
          <label>{{$t('Subject')}}</label>
          <el-input type="textarea" class="inline-textarea"></el-input>
        </el-col>
      </el-row>

      <div id="editor" class="editor-wrap">

      </div>
    </div>
    <div class="btn-wrap">
      <el-button class="pull-right" type="primary" @click="save">保存</el-button>
    </div>
    <div v-html="form.content">
    </div>
  </div>
</template>

<script>
import E from 'wangeditor'
import i18next from 'i18next'

export default {
  data () {
    return {
      editor:{},
      form:{
        target:'',
        checkList:[],
        content:''
      }
    }
  },

  computed: {},

  mounted(){
    this.editor = new E('#editor')
    // this.editor.i18next = i18next
    // this.editor.config.lang = window.localStorage.getItem('lang') == 'zh_CN' ? 'zh_CN' :'en'
    this.editor.config.height = 400
    this.editor.config.uploadImgServer = '/upload-img'
    this.editor.config.uploadImgMaxSize = 1024 * 1024 // 1M
    this.editor.config.showFullScreen = false
    this.editor.create()
    // editor.txt.html('<p>用 JS 设置的内容</p>')
  },

  methods: {
    save(){
      this.form.content = this.editor.txt.html()
      console.log('提交')
      console.log(this.editor.txt.html())
    }
  }
}

</script>
<style lang='less' scoped>
@color_text:#636162;

.information-container{
  padding: 0 20px;
  .el-divider--horizontal {
      margin: 10px auto;
  }
  .el-divider {
      background-color: #f3f3f3;
  }
  .condition{
    position: relative;
    z-index: 1;
    font-size: 14px;
    margin-bottom: 10px;
    .el-row{
      padding: 5px 0;
      .el-col{
        &>label:not(.el-checkbox){
          width: 140px;
          padding: 4px 10px 4px 0;
          display: inline-block;
          box-sizing: border-box;
          color: @color_text;
          vertical-align: top;
        }
        .el-checkbox-group {
          display: inline-block;
          padding: 4px 0;
        }
        .inline-textarea{
          width: calc(100% - 140px);
        }
      }
    }
  }
  .editor-wrap{
    position: relative;
    z-index: 0;
  }
  .btn-wrap{
    padding-top:10px ;
  }
  
}

</style>